import React, { useState } from 'react';
import { Modal, Button, message, Form, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import BudgetSelect from '@/components/BudgetSelect';
import { useModel } from 'umi';
import { add } from '@/services/Budget';

const AddModal = (props) => {
  const { id } = props;
  const formRef = React.createRef();
  const [isShowModal, setModal] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const { initialState } = useModel('@@initialState');
  const currentUnitId = initialState.currentUser.unitId;
  /* 监听打开弹出动作 */
  const onShowModal = () => {
    setModal(true);
  }
  /* 监听取消动作 */
  const onCancel = () => {
    setModal(false);
  }
  /* 提交数据 */
  const onConfirm = async () => {
    try {
      const { add: addSuccessCallback, id } = props;
      const { validateFields } = formRef.current;
      const values = await validateFields();
      const params = { ...values, unitId: id }
      setLoading(true);
      await add(params);
      addSuccessCallback ? addSuccessCallback() : null;
      message.success('添加成功！');
      setModal(false);
    } catch (e) {
      console.error('新增学校：', e);
    } finally {
      setLoading(false);
    }
  }

  const text = currentUnitId !== id ? '预算调拨' : '新增预算';
  return (
    <React.Fragment>
      <Button type="link" onClick={onShowModal} icon={<PlusOutlined />}>
        {text}
      </Button>
      <Modal
        title={text}
        okText="确定"
        width="50vw"
        confirmLoading={isLoading}
        visible={isShowModal}
        onCancel={onCancel}
        onOk={onConfirm}>
        <Form
          ref={formRef}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal">
          <Form.Item
            name='code'
            label='预算名称：'
            rules={[{ required: true, message: '预算名称不能为空' }]}>
            <Input placeholder='请输入预算名称' />
          </Form.Item>
          <Form.Item
            name='amount'
            label='预算金额：'
            rules={[{ required: true, message: '预算金额不能为空' }]}>
            <Input type='number' placeholder='请输入预算金额' />
          </Form.Item>
          {
            currentUnitId !== id
              ?
              <Form.Item
                name='parentBudgetId'
                label='所属预算：'
                rules={[{ required: true, message: '所属预算不能为空！' }]}>
                <BudgetSelect id={id} />
              </Form.Item>
              :
              null
          }
          <Form.Item
            name='remark'
            label='备注：'>
            <Input.TextArea placeholder='请输入备注' />
          </Form.Item>
        </Form>
      </Modal>
    </React.Fragment>
  )
}

export default AddModal




/* 
*
******
class 写法  停用
******
*/
class AddModal222 extends React.Component {
  constructor(props) {
    super(props);
    getUserInfo()
    this.formRef = React.createRef()
    this.state = {
      isShowModal: false,
      isLoading: false
    };
  }
  onShowModal = () => {
    this.setState({ isShowModal: true })
  }
  onCancel = () => {
    this.setState({ isShowModal: false })
  }
  /* 提交数据 */
  onConfirm = async () => {
    try {
      const { add: addSuccessCallback, id } = this.props;
      const { validateFields } = this.formRef.current;
      const values = await validateFields();
      const params = { ...values, unitId: id }
      this.setState({ isLoading: true })
      await add(params);
      addSuccessCallback ? addSuccessCallback() : null;
      message.success('添加成功！');
      this.setState({ isShowModal: false });
    } catch (e) {
      console.error('新增学校：', e);
    } finally {
      this.setState({ isLoading: false })
    }
  }
  render() {
    const { isShowModal, isLoading } = this.state;
    const { formRef, onCancel, onConfirm } = this;
    const { children, id } = this.props;
    return (
      <React.Fragment>
        <Button type="link" onClick={this.onShowModal} icon={<PlusOutlined />}>{children}</Button>
        <Modal
          title="预算调拨"
          okText="新增"
          width="50vw"
          confirmLoading={isLoading}
          visible={isShowModal}
          onCancel={onCancel}
          onOk={onConfirm}>
          <Form
            ref={formRef}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            layout="horizontal">
            <Form.Item
              name='code'
              label='预算名称：'
              rules={[{ required: true, message: '预算名称不能为空' }]}>
              <Input placeholder='请输入预算名称' />
            </Form.Item>
            <Form.Item
              name='amount'
              label='预算金额：'
              rules={[{ required: true, message: '预算金额不能为空' }]}>
              <Input type='number' placeholder='请输入预算金额' />
            </Form.Item>
            <Form.Item
              name='parentBudgetId'
              label='所属预算：'
              rules={[{ required: true, message: '所属预算不能为空！' }]}>
              <BudgetSelect unitId={id} />
            </Form.Item>
            <Form.Item
              name='remark'
              label='备注：'>
              <Input.TextArea placeholder='请输入备注' />
            </Form.Item>
          </Form>
        </Modal>
      </React.Fragment>
    );
  }
}